/***

Icon
====

SVG Icons (see svg.js)


```
<div class="styleguide--demo">
    <span class="icon icon--${id}"><svg><title>id</title><use xlink:href="#icon--${id}"></use></svg></span>
</div>
```

***/
@import '~svg-spritemap-webpack-plugin/svg-sprite-icons';
@import '~svg-spritemap-webpack-plugin/svg-sprite-icons-files';

@each $name, $icon in $icons-sizes {
  .icon--#{$name},
  .icon--#{$name} svg {
    width: map_get($icon, 'width');
    height: map_get($icon, 'height');
  }
}

@each $name, $icon in $icons-files-sizes {
  .icon--#{$name},
  .icon--#{$name} svg {
    width: map_get($icon, 'width');
    height: map_get($icon, 'height');
  }
}

.icon {
  display:inline-block;

  svg {
    vertical-align:inherit;
    display:inherit;
  }
}
